@import "variables";

.multi-step {
    .btn {
        &.btn-primary {
            color: rgb(255, 255, 255);
            background-color: rgb(57, 192, 186) !important;
        }
    }

    .modal-header {


        .modal-steps {
            .step {
                &:before {
                    border-color: $step_default_color
                }

                .dot {
                    border-color: $step_default_color;
                    background-color: $step_default_color;
                }

                &:after {
                    border-color: $step_default_color;
                }


                &.current {
                    &:after {
                        border-color: $step_primary_color;
                    }

                    .dot {
                        border-color: $step_primary_color;

                        &:before {
                            background-color: $step_default_color;
                        }
                    }
                }

                &.completed {
                    &:after {
                        border-color: $step_primary_color;
                    }

                    .dot {
                        border-color: $step_primary_color;

                        &:before {
                            background-color: $step_primary_color;
                        }
                    }
                }

                &.skipped {
                    &:after {
                        border-color: $step_skipped_color;
                    }

                    .dot {
                        border-color: $step_skipped_color;

                        &:before {
                            background-color: $step_skipped_color;
                        }
                    }
                }
            }

        }
    }

    .modal-footer {
        .btn-prev {
            background-color: $step_primary_color;

            &.disabled {
                background-color: $step_default_color;
                color: #000;
            }
        }

        .btn-skip {
            background-color: $step_skipped_color;

            &.disabled {
                background-color: $step_default_color;
                color: #000;
            }
        }

        .btn-next {
            background-color: $step_primary_color;

            &.disabled {
                background-color: $step_default_color;
                color: #000;
            }
        }
    }
}